<template>
    <view class="content">
        <view class="top">
			<view class="info">
				<image :src="data.member.image_uri || '../../static/icon/avatar.png'" class="avatar"></image>
				<view class="u-flex-1">
					<view class="name">{{ data.member.nickname || '用户名' }}</view>
					<view class="tel" v-if="data.member.mobile">
						<image src="../../static/icon/tel.png" class="tel-icon"></image>
						<view>{{ data.member.mobile }}</view>
					</view>
				</view>
				<view class="u-p-l-20">
					<view class="u-font-26 u-text-right">我的积分</view>
					<view class="point">{{ data.member.points }}</view>
				</view>
			</view>
			
			<u-swiper :list="bannerx" :height="255" border-radius="20" indicator-pos="bottomRight" @click="toGuangGao($event, data.slides)"></u-swiper>
		
			<view class="nav">
				<view class="nav-i" @click="toPage(`/pages/point-order/point-list`)">
					<image src="../../static/image/p_1.png" class="p-1"></image>
					<view>积分明细</view>
				</view>
				<view class="nav-i" @click="toPage(`/pages/point-order/p-order`)">
					<image src="../../static/image/p_2.png" class="p-1"></image>
					<view>积分订单</view>
				</view>
				<view class="nav-i" @click="show = true">
					<image src="../../static/image/p_3.png" class="p-1"></image>
					<view>积分规则</view>
				</view>
			</view>
		</view>
		
		<view class="wrapper">
			<view class="title">积分商城</view>
			<view class="box">
				<view class="item" v-for="(item, index) in list" :key="index" 
					@click="toPage(`/pages/point-goods/point-goods?id=${item.id}&good_type=${item.good_type}`)">
					
					<image :src="item.image_uri" class="img"></image>
					<view class="item-d">
						<view class="goods-name u-line-2">{{item.belong}}</view>
						<view class="price">
							<image src="../../static/icon/point_1.png" class="point-1"></image>
							<view class="price-num">{{item.price}}</view>
							<view class="line-price" v-if="item.material_price">
								￥{{item.material_price}}
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view style="height: 94rpx;padding-top: 30rpx;">
			    <u-loadmore :status="status" v-if="status != 'loadmore'" />
			</view>
		</view>
		
		<!-- 积分规则 -->
		<u-popup v-model="show" mode="center" border-radius="30">
			<view class="rule-frame">
				<view class="rule-frame-tit">{{rule.title}}</view>
				<view>
		            <scroll-view scroll-y="true" style="height: 40vh;">
		                <view class="privacy-txt">
		                    <rich-text :nodes="rule.content"></rich-text>
		                </view>
		            </scroll-view>
				</view>
				<view class="rule-btn" @click="show = false">我知道了</view>
			</view>
		</u-popup>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                bannerx: [],
				show: false,
				rule: {},
				status: 'loadmore', //是否显示没有更多了
				page: 1,
				list: [], 
				data: {},
            };
        },
        onLoad() {
            this.getRule()
        },
		onShow() {
			this.page = 1
			this.list = []
			this.status = 'loadmore'
			this.getList()
			
			this.getPointIndex()
		},
		onReachBottom() {
			if(this.page == 1){return}
			this.getList()
		},
        methods: {
            toPage(url) {
				if (!uni.getStorageSync('userToken')) {
				    this.$confirm('请先登录并且绑定手机号，是否去登录？',()=>{
				        uni.navigateTo({
				            url: "/pages/login/login"
				        })
				    })
				} else {
					this.$gTo(url)
				}
			},
			
			// 获取积分商城数据
			getPointIndex() {
				this.$ajax('applets/point', {
					userToken: this.$getSync('userToken'),
				}).then(ret => {
					if (ret.status == 0) {
			            this.data = ret.data
						
						this.bannerx = []
						if (this.data.slides.length > 0) {
						    this.data.slides.forEach(cur => {
						        this.bannerx.push({image: cur.image_uri})
						    })
						}
					} else {
						this.$toast(ret.message);
					}
				});
			},
			
			getList() {
				if (this.status == 'nomore') return;
				this.status = 'loading';
				this.$ajax('applets/wareList', {
					userToken: this.$getSync('userToken'),
					page: this.page,
					limit: 10,
			        type: 3,//2-正常商品 3-积分商品
					is_recommend: 0,//是否首页推荐 0-否 1-是
			        category_id: '',//分类编号
			        keywords: '',//搜索关键词
				}).then(ret => {
					if (ret.status == 0) {
						if (ret.data.length > 0) {
							this.list = this.list.concat(ret.data);
							this.page++;
							this.status = 'loadmore'
						} else {
							this.status = 'nomore'
						}
					} else {
						this.$toast(ret.message);
					}
				});
			},
			
			// 获取规则
			getRule() {
				this.$ajax('members/help_list', {
					type: 3, // 0-售后服务 1-常问题列表 2-联系我们 3-积分规则 4-分销规则
				}).then(ret => {
					if (ret.status == 0) {
			            this.rule = ret.data && ret.data[0]
					} else {
						this.$toast(ret.message);
					}
				});
			},
        }
    };
</script>

<style lang="scss">
	// 规则介绍
	.rule-frame {
		width: 626rpx;
		background-color: #fff;
		padding: 40rpx 30rpx;
	}
	.rule-frame-tit {
		font-size: 32rpx;
	    font-weight: bold;
		line-height: 34rpx;
		color: #000000;
		text-align: center;
		margin-bottom: 40rpx;
	}
	.privacy-txt {
	    font-size: 26rpx;
	    color: #949494;
	}
	.rule-btn {
		width: 372rpx;
		height: 80rpx;
		font-size: 30rpx;
		line-height: 80rpx;
		color: #fff;
		text-align: center;
		background-color: #2658aa;
		border-radius: 50rpx;
		margin: 30rpx auto 0;
	}
	
	
	
    page{
        background-color: #f5f5f5;
    }
	.top{
		background: linear-gradient(to top,#fff,#fff,#9ab1d7,#2658aa);
		padding: 20rpx 20rpx 45rpx;
	}
	.info{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 25rpx;
		color: #fff;
	}
	.avatar{
		width: 86rpx;
		height: 86rpx;
		border: 2rpx solid #fff;
		border-radius: 50%;
		margin-right: 12rpx;
	}
	.name{
		font-size: 28rpx;
		padding-bottom: 6rpx;
	}
	.tel{
		width: 210rpx;
		height: 38rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(255, 255, 255, .15);
		border-radius: 50rpx;
		font-size: 24rpx;
	}
	.tel-icon{
		width: 13rpx;
		height: 18rpx;
		margin-right: 8rpx;
	}
	.point{
		font-size: 44rpx;
		color: #ffd69b;
	}
	.nav{
		padding-top: 34rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.nav-i{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
	}
	.p-1{
		width: 91rpx;
		height: 91rpx;
		margin-bottom: 10rpx;
	}
	
	.wrapper{
		padding: 30rpx 20rpx;
	}
	.title{
		font-size: 36rpx;
		font-weight: bold;
		padding-bottom: 20rpx;
	}
	.box{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
	}
	.item{
		width: 345rpx;
		height: 512rpx;
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}
	.item:nth-child(2n) {
		margin-right: 0;
	}
	.img{
		width: 345rpx;
		height: 345rpx;
	}
	.item-d{
		padding: 20rpx 18rpx 30rpx;
	}
	.goods-name{
		font-size: 26rpx;
		font-weight: bold;
	}
	.price{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 16rpx;
	}
	.point-1{
		width: 17rpx;
		height: 19rpx;
		margin-right: 10rpx;
	}
	.price-num{
		flex: 1;
		font-size: 34rpx;
		font-weight: bold;
		color: #fb351f;
	}
	.line-price{
		font-size: 24rpx;
		color: #808080;
		text-decoration: line-through;
	}
	

</style>
